<template>
  <div id="panel">
    <!-- 搜索表单区域 -->
    <el-card class="queryForm">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <el-form-item label="物资库名称：" prop="warehouseName">
          <el-input
            v-model="queryParams.warehouseName"
            placeholder="请输入物资库名称"
          ></el-input>
        </el-form-item>
        <div class="searchBtnBox">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button @click="resetQuery">重置</el-button>
        </div>
      </el-form>
    </el-card>

    <!-- 操作按钮和表格区域 -->
    <el-card class="pageContent">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdate"
            >修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            >删除</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        stripe
        :height="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="warehouseName" label="物资库名称" />
        <el-table-column prop="region" label="行政区划" />
        <el-table-column prop="address" label="物资库地址" />
        <el-table-column prop="warehouseType" label="仓库类型" />
        <el-table-column prop="manager" label="负责人" />
        <el-table-column prop="manageUnit" label="管理单位" />
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="view(scope.row)">物资</el-button>
            <el-button type="text" @click="viewDetail(scope.row)"
              >详情</el-button
            >
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" @click="delRows(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination-self"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pager-count="5"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        layout="slot, total, sizes, prev, pager, next, jumper"
        :total="tableList.total"
      >
        <el-button
          class="refresh-button"
          icon="el-icon-refresh"
          title="刷新"
          @click="getList"
        />
      </el-pagination>
    </el-card>

    <!-- 新增/修改弹框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物资库名称" prop="warehouseName" required>
              <el-input
                v-model="form.warehouseName"
                placeholder="请输入物资库名称"
              />
            </el-form-item>
            <el-form-item label="物资库代码" prop="warehouseCode" required>
              <el-input
                v-model="form.warehouseCode"
                placeholder="请输入物资库代码"
              />
            </el-form-item>
            <el-form-item label="行政区划" prop="region" required>
              <el-select v-model="form.region" placeholder="请选择行政区划">
                <el-option label="高平" value="高平"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物资库地址" prop="address" required>
              <el-input v-model="form.address" placeholder="请输入物资库地址" />
            </el-form-item>
            <el-form-item label="物资库库容" prop="capacity" required>
              <el-input
                v-model="form.capacity"
                placeholder="请输入物资库库容"
              />
            </el-form-item>
            <el-form-item label="仓库类型" prop="warehouseType" required>
              <el-select
                v-model="form.warehouseType"
                placeholder="请选择仓库类型"
              >
                <el-option label="政府" value="政府"></el-option>
                <el-option label="企业" value="企业"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="经度" prop="longitude" required>
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-form-item>
            <el-form-item label="纬度" prop="latitude" required>
              <el-input v-model="form.latitude" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="manager" required>
              <el-input v-model="form.manager" placeholder="请输入负责人" />
            </el-form-item>
            <el-form-item label="联系方式" prop="contact" required>
              <el-input v-model="form.contact" placeholder="请输入联系方式" />
            </el-form-item>
            <el-form-item label="管理单位" prop="manageUnit" required>
              <el-input
                v-model="form.manageUnit"
                placeholder="请输入管理单位"
              />
            </el-form-item>
            <el-form-item label="运营单位名称" prop="operateUnit" required>
              <el-input
                v-model="form.operateUnit"
                placeholder="请输入运营单位名称"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "WarehouseManage",
  components: {},
  data() {
    return {
      tableHeight: window.innerHeight - 400,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        warehouseName: "", // 物资库名称
      },
      tableList: {
        total: 0,
        rows: [],
      },
      ids: [], // 选中项ID集合
      tableData: [
        {
          id: "1",
          warehouseName: "高平应急物资库一号库",
          warehouseCode: "GP001",
          region: "高平",
          address: "高平市开发区路12号",
          capacity: "5000㎡",
          warehouseType: "政府",
          longitude: "112.89",
          latitude: "35.76",
          manager: "张三",
          contact: "13800138000",
          manageUnit: "高平市应急管理局",
          operateUnit: "高平市应急物资运营中心",
          remark: "主要存储应急救援设备",
        },
        {
          id: "2",
          warehouseName: "高平物资储备中心",
          warehouseCode: "GP002",
          region: "高平",
          address: "高平市工业园区8号",
          capacity: "8000㎡",
          warehouseType: "企业",
          longitude: "112.91",
          latitude: "35.78",
          manager: "李四",
          contact: "13900139000",
          manageUnit: "高平市物资局",
          operateUnit: "高平物资运营有限公司",
          remark: "存储日常物资",
        },
        {
          id: "3",
          warehouseName: "高平救灾物资库",
          warehouseCode: "GP003",
          region: "高平",
          address: "高平市郊区救援路5号",
          capacity: "6000㎡",
          warehouseType: "政府",
          longitude: "112.87",
          latitude: "35.75",
          manager: "王五",
          contact: "13700137000",
          manageUnit: "高平市民政局",
          operateUnit: "高平救灾物资运营部",
          remark: "存储救灾专用物资",
        },
        {
          id: "4",
          warehouseName: "高平工业物资库",
          warehouseCode: "GP004",
          region: "高平",
          address: "高平市产业园区10号",
          capacity: "7000㎡",
          warehouseType: "企业",
          longitude: "112.90",
          latitude: "35.77",
          manager: "赵六",
          contact: "13600136000",
          manageUnit: "高平市工业和信息化局",
          operateUnit: "高平工业物资运营公司",
          remark: "存储工业生产物资",
        },
      ],
      open: false, // 弹框显隐
      title: "", // 弹框标题
      form: {
        id: "",
        warehouseName: "", // 物资库名称
        warehouseCode: "", // 物资库代码
        region: "高平", // 行政区划
        address: "", // 物资库地址
        capacity: "", // 物资库库容
        warehouseType: "", // 仓库类型
        longitude: "", // 经度
        latitude: "", // 纬度
        manager: "", // 负责人
        contact: "", // 联系方式
        manageUnit: "", // 管理单位
        operateUnit: "", // 运营单位名称
        remark: "", // 备注
      },
      rules: {
        warehouseName: [
          { required: true, message: "物资库名称不能为空", trigger: "blur" },
        ],
        warehouseCode: [
          { required: true, message: "物资库代码不能为空", trigger: "blur" },
        ],
        region: [
          { required: true, message: "行政区划不能为空", trigger: "change" },
        ],
        address: [
          { required: true, message: "物资库地址不能为空", trigger: "blur" },
        ],
        capacity: [
          { required: true, message: "物资库库容不能为空", trigger: "blur" },
        ],
        warehouseType: [
          { required: true, message: "仓库类型不能为空", trigger: "change" },
        ],
        longitude: [
          { required: true, message: "经度不能为空", trigger: "blur" },
        ],
        latitude: [
          { required: true, message: "纬度不能为空", trigger: "blur" },
        ],
        manager: [
          { required: true, message: "负责人不能为空", trigger: "blur" },
        ],
        contact: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的手机号格式",
            trigger: "blur",
          },
        ],
        manageUnit: [
          { required: true, message: "管理单位不能为空", trigger: "blur" },
        ],
        operateUnit: [
          { required: true, message: "运营单位名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.pageInit();
  },
  methods: {
    pageInit() {
      this.getList();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加物资库信息";
    },
    handleUpdate() {
      if (this.ids.length === 0) {
        this.$message.warning("请先勾选需要修改的数据");
        return;
      }
      if (this.ids.length > 1) {
        this.$message.warning("只能选择一条数据进行修改");
        return;
      }
      const row = this.tableData.find((item) => item.id === this.ids[0]);
      this.reset();
      this.open = true;
      this.title = "修改物资库信息";
      this.form = { ...row };
    },
    handleDelete() {
      if (this.ids.length === 0) {
        this.$message.warning("请先勾选需要删除的数据");
        return;
      }
      const names = this.tableData
        .filter((item) => this.ids.includes(item.id))
        .map((item) => item.warehouseName)
        .join("、");
      this.$confirm(`是否确认删除以下物资库：${names}`, "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter(
            (item) => !this.ids.includes(item.id)
          );
          this.ids = [];
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    view(row) {
      console.log("查看物资", row);
    },
    viewDetail(row) {
      console.log("查看详情", row);
    },
    edit(row) {
      this.reset();
      this.open = true;
      this.title = "修改物资库信息";
      this.form = { ...row };
    },
    delRows(row) {
      this.$confirm(`是否确认删除物资库：${row.warehouseName}`, "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter((item) => item.id !== row.id);
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        id: "",
        warehouseName: "",
        warehouseCode: "",
        region: "高平",
        address: "",
        capacity: "",
        warehouseType: "",
        longitude: "",
        latitude: "",
        manager: "",
        contact: "",
        manageUnit: "",
        operateUnit: "",
        remark: "",
      };
      this.$refs.form && this.$refs.form.resetFields();
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            const index = this.tableData.findIndex(
              (item) => item.id === this.form.id
            );
            if (index > -1) {
              this.tableData.splice(index, 1, this.form);
            }
            this.open = false;
            this.$message.success("修改成功");
          } else {
            this.form.id = Date.now(); // 模拟生成ID
            this.tableData.unshift(this.form);
            this.open = false;
            this.$message.success("新增成功");
          }
          this.getList();
        }
      });
    },
    handleExport() {
      this.$message.success("导出功能待实现");
    },
    getList() {
      this.tableList.total = this.tableData.length;
      this.tableList.rows = this.tableData;
    },
  },
};
</script>
<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 10px 0 10px 20px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .searchBtnBox {
      display: inline-block;
      margin: 10px 0 10px 20px;
    }
  }

  .pageContent {
    .mb8 {
      margin-bottom: 8px;
    }
  }
}
</style>
